<template>
    <div class="content-card" :class="cls">
        <div class="images"  :style="{ backgroundImage: `url(${item.image})` }">
          <div class="txt">
            <div class="title">
              <span>{{ item.title }}</span>
            </div>
            <div class="num">
              Credits: <span>{{ item.credits }}</span>
            </div>
            <div class="num">
              Duration: <span>{{item.duration}}</span>
            </div>
          </div>
          <img src="@/assets/more.png" v-if="showIcon" class="more" alt="" @click.stop="showModal">
        </div>
        <img src="@/assets/checked.png" class="checked" alt="">
       
      </div>
    
</template>
<script setup>
 import {defineProps ,defineEmits} from "vue";

    const props = defineProps({
      item: {
          type: Object,
          default: {}
      },
      cls: {
          type: String,
          default: ''
      },
      showIcon: {
          type: Boolean,
          default: false
      },
    });
    const emit=defineEmits(['openModal'])
    const showModal=()=>{
      emit('openModal',true)
    }
</script>
<style lang='scss' scoped>
     .content-card {
      border-radius: 0 10px 10px 10px;
      height: 329px;
      cursor: pointer;
      transition: all 0.3s ease;
      overflow: hidden;
      position: relative;
        &.active{
          border: 2px solid RGBA(227, 66, 52, 1);
          .checked{
            display: block;
          }
        }
        .checked{
          display: none;
          position: absolute;
          right: 15px;
          bottom: 15px;
          width: 30px;
          height: 30px;
        }
        .more{
          position: absolute;
          right: 20px;
          bottom: 110px;
          width: 27px;
          height: 27px;
        }
      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
      }

      .images{
         height: 329px;
         background-size: cover;
        border-radius: 0 10px 10px 10px;
        display: flex;
        align-items: end;
      }
      .txt{
        border-top: 1px solid rgba(218, 218, 218, 0.2);
        padding: 10px 10px 0;
        width: 100%;
        height: 119px;
        background: rgba(32, 25, 58, 1);
        border-radius: 0px 10px 0px 10px;
        padding: 20px;
        opacity: 0.65;
        .title{
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #FFFFFF;
          line-height: 18px;
          margin-bottom: 30px;
        }
        .num{
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 16px;
          color: #B3B3B3;
          line-height: 16px;
          margin-bottom: 8px;
          span{
            color: #fff;
          }
        }
      }
    }   
     
</style>
